<template>
	<view id="visual">
		<el-row :gutter="20" class="el-row">
			<el-col :span="6">
				<view class="bg-purple">
					<image src="/static/visual/yh.png" mode=""></image>
					<text>用户总人数</text>
				</view>
			</el-col>
			<el-col :span="6">
				<view class="bg-purple">
					<image src="/static/visual/dd.png" mode=""></image>
					<text>订单总数</text>
				</view>
			</el-col>
			<el-col :span="6">
				<view class="bg-purple">
					<image src="/static/visual/zrs.png" mode=""></image>
					<text>当天在线访问人数</text>
				</view>
			</el-col>
		</el-row>
		<view class="zztu">
			<echarts
				:option="option"
				style="height: 700rpx; background-color: #FFFFFF;width: 92%;margin: auto;"
			></echarts>
		</view>
		<view class="">
			<hm-echarts data-id="line" :options="options1" style="height: 700rpx; background-color: #FFFFFF;width: 92%;margin: auto;margin-top: 60rpx;"></hm-echarts>
		</view>
	</view>
</template>

<script>
	import HmEcharts from "@/components/hm-echarts/hm-echarts.vue"
	import Echarts from '@/components/echarts/echarts.vue'
	import EchartsEl from '@/components/echarts/echarts-el.vue'
export default {
	components: { HmEcharts },
	data() {
		return {
			options1: {
			        backgroundColor: "#FFFFFF",
					legend: {
						data: ['当月新增用户总数', '当月订单总数','当月官网访客总数']
					},
					grid: {
						left: '5%',
						right: '8%',
						bottom: '5%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						positionStatus: true,
						// formatterStatus: true, // 自定义变量：是否格式化tooltip，设置为false时下面三项均不起作用
						// formatterUnit: '元', // 自定义变量：数值后面的单位
						// formatFloat2: true, // 自定义变量：是否格式化为两位小数
						// formatThousands: true // 自定义变量：是否添加千分位
					},
			        xAxis: {
			          type: "category",
			          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月","8月","9月","10月","11月","12月"],
			        },
			        yAxis: {
			          type: "value",
			        },
			        series: [
			          {
						name:'当月新增用户总数',
			            data: [5278, 3657, 2857, 2512, 1285, 8524, 9966,5125,6784,5214,2355,5125],
			            type: "line",
			            smooth: true,
			          },{
						  name:'当月订单总数',
			            data: [21542, 36524, 19523, 35416, 52412, 30214, 25468,25487,75210,42013,95236,85420],
			            type: "line",
			            smooth: true,
			          },{
						  name:'当月官网访客总数',
			            data: [152758, 256257, 206857, 162512, 371285, 478524, 279966,185125,386784,295214,302355,420125],
			            type: "line",
			            smooth: true,
			          },
			        ],
			      },
			option: {
				notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
				tooltip: {
					trigger: 'axis',
					positionStatus: true,
					// formatterStatus: true, // 自定义变量：是否格式化tooltip，设置为false时下面三项均不起作用
					// formatterUnit: '元', // 自定义变量：数值后面的单位
					// formatFloat2: true, // 自定义变量：是否格式化为两位小数
					// formatThousands: true // 自定义变量：是否添加千分位
				},
				legend: {
					data: ['用户数量', '订单数','当天在线总人数']
				},
				grid: {
					left: '5%',
					right: '8%',
					bottom: '5%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['周一', '周二', '周三', '周四', '周五']
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '用户数量',
						type: 'bar',
						data: [52570, 55832, 65101, 69405, 74090],
						// 自定义变量，以数组形式传递渐变参数
						linearGradient: [0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]]
					},
					{
						name: '订单数',
						type: 'bar',
						data: [1920, 3582, 2540, 3234, 5290],
						// 自定义变量，以数组形式传递渐变参数
						linearGradient: [0, 0, 0, 1,
                        [
                            {offset: 0, color: '#0bac00'},
                            {offset: 0.7, color: '#0dcb00'},
                            {offset: 1, color: '#0fef00'}
                        ]]
					},
					{
						name: '当天在线总人数',
						type: 'bar',
						data: [10200, 31820, 51910, 42304, 72900],
						// 自定义变量，以数组形式传递渐变参数
						linearGradient: [0, 0, 0, 1,
					    [
					        {offset: 0, color: '#df00df'},
					        {offset: 0.7, color: '#b500b5'},
					        {offset: 1, color: '#ff00ff'}
					    ]]
					}
				]
			}
		};
	},
	components: {
		Echarts,
		EchartsEl
	},
	methods: {

	}
};
</script>

<style lang="scss">
page{
		background: #dbdddf;
	}
#visual {	
	.el-row {
		padding-top: 60rpx;
		justify-content: space-around;
		display: flex;
		margin-bottom: 60rpx;
	}
	.bg-purple {
		> image {
			vertical-align: middle;
			width: 100rpx;
			height: 100rpx;
		}
		text-align: center;
		line-height: 210rpx;
		width: 640rpx;
		height: 210rpx;
		background: #ffffff;

	}
}
</style>
